<template>
	<view>
		<uni-card class="custom-card" style="border-radius: 30rpx;overflow: hidden;" margin="10rpx 10rpx" spacing="0">
			<view class="map">
				<map :longitude="longitude" :latitude="latitude"></map>
			</view>
		</uni-card>
		<uni-card class="custom-card" style="border-radius: 30rpx;overflow: hidden;" margin="30rpx 10rpx" spacing="0">
			<view class="container">
				<!-- 选项卡区域 -->
				<view class="tab-bar">
					<view class="tab-item" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
						搭电
					</view>
					<view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
						换胎
					</view>
					<view class="tab-item" :class="{ active: currentTab === 2 }" @click="currentTab = 2">
						拖车
					</view>
				</view>

				<!-- 表单区域 -->
				<view v-if="currentTab === 0" class="form-area">
					<view class="form-row">
						<view class="form-label">位置</view>
						<input class="form-input" v-model="location" placeholder="请输入位置" />
					</view>
					<view class="form-row">
						<view class="form-label">求助人</view>
						<input class="form-input" v-model="helper" placeholder="请输入求助人" />
					</view>
					<view class="form-row">
						<view class="form-label">联系方式</view>
						<input class="form-input" v-model="phone" placeholder="请输入联系方式" type="number" />
					</view>
					<view class="form-row">
						<view class="form-label">车牌</view>
						<input class="form-input" v-model="carNumber" placeholder="请输入车牌" />
					</view>
					<view class="form-row">
						<view class="form-label">描述</view>
						<textarea class="form-textarea" v-model="description" placeholder="请准确描述当前的状况及所需的帮助" />
					</view>
				</view>

				<!-- 表单区域 -->
				<view v-if="currentTab === 1" class="form-area">
					<view class="form-row">
						<view class="form-label">位置</view>
						<input class="form-input" v-model="location" placeholder="请输入位置" />
					</view>
					<view class="form-row">
						<view class="form-label">求助人</view>
						<input class="form-input" v-model="helper" placeholder="请输入求助人" />
					</view>
					<view class="form-row">
						<view class="form-label">联系方式</view>
						<input class="form-input" v-model="phone" placeholder="请输入联系方式" type="number" />
					</view>
					<view class="form-row">
						<view class="form-label">车牌</view>
						<input class="form-input" v-model="carNumber" placeholder="请输入车牌" />
					</view>
					<view class="form-row">
						<view class="form-label">描述</view>
						<textarea class="form-textarea" v-model="description" placeholder="请准确描述当前的状况及所需的帮助" />
					</view>
				</view>

				<!-- 表单区域 -->
				<view v-if="currentTab === 2" class="form-area">
					<view class="form-row">
						<view class="form-label">起点</view>
						<input class="form-input" v-model="startPoint" placeholder="请输入起点" />
					</view>
					<view class="form-row">
						<view class="form-label">终点</view>
						<input class="form-input" v-model="endPoint" placeholder="请输入终点" />
					</view>
					<view class="form-row">
						<view class="form-label">求助人</view>
						<input class="form-input" v-model="helper" placeholder="请输入求助人" />
					</view>
					<view class="form-row">
						<view class="form-label">联系方式</view>
						<input class="form-input" v-model="phone" placeholder="请输入联系方式" type="number" />
					</view>
					<view class="form-row">
						<view class="form-label">车牌</view>
						<input class="form-input" v-model="carNumber" placeholder="请输入车牌" />
					</view>
					<view class="form-row">
						<view class="form-label">描述</view>
						<textarea class="form-textarea" v-model="description" placeholder="请准确描述当前的状况及所需的帮助" />
					</view>
				</view>

				<!-- 操作区域 -->
				<view class="action-area">
					<button class="call-btn">呼叫救援</button>
					<view class="record-link" @click="toRecord()">救援记录 ></view>
				</view>
			</view>
		</uni-card>

		<uni-card class="custom-card" style="border-radius: 30rpx;overflow: hidden;" margin="30rpx 10rpx" spacing="0">
			<view class="container">
				<!-- 标题 -->
				<view class="page-title">警务救助</view>

				<!-- 救助选项网格 -->
				<view class="rescue-grid">
					<!-- 循环渲染救助项 -->
					<view class="rescue-item" v-for="(item, index) in rescueList" :key="index"
						@click="makeCall(item.number)">
						<!-- 图标 -->
						<image class="item-img" :src="item.image" mode=""></image>
						<!-- 名称 -->
						<view class="item-name">{{ item.name }}</view>

						<!-- 号码 -->
						<view class="item-number">{{ item.number }}</view>
					</view>
				</view>
			</view>
		</uni-card>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const longitude = ref(116.397470)
	const latitude = ref(39.908823)

	// 选项卡激活状态（0:搭电 1:换胎 2:拖车）
	const currentTab = ref(2);

	// 表单字段双向绑定
	const startPoint = ref('河南省焦作市山阳区32号');
	const endPoint = ref('山阳区解放路66号');
	const helper = ref('张先生');
	const phone = ref('15523632541');
	const carNumber = ref('豫CJ4321');
	const description = ref('');
	const location = ref('河南省焦作市山阳区32号')

	// 救助项数据
	const rescueList = ref([{
			name: '交通事故',
			number: '122',
			image: '/static/image/rescue/交通事故 拷贝@2x.png'
		},
		{
			name: '火警',
			number: '119',
			image: '/static/image/rescue/火警@2x.png'
		},
		{
			name: '急救中心',
			number: '120',
			image: '/static/image/rescue/急救包@2x.png'
		},
		{
			name: '公安报警',
			number: '110',
			image: '/static/image/rescue/警察,公安@2x.png'
		}
	]);
	// 拨打电话功能
	const makeCall = (phoneNumber) => {
		uni.showToast({
			title: "功能暂未开放",
			icon: "error"
		})
	};
	const getLocationInfo = () => {
		uni.getLocation({
			success: (res) => {
				console.log('位置信息原始数据：', res);
				// 给响应式变量赋值时，需通过 .value 访问（模板中无需 .value）
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				console.log('赋值后纬度：', latitude.value);
				console.log('赋值后经度：', longitude.value);
			},
			// 补充错误处理（避免用户拒绝授权时无反馈）
			fail: (err) => {
				console.error('获取位置失败：', err);
				uni.showToast({
					title: '请允许位置授权',
					icon: 'none'
				});
			}
		});
	};
	const toRecord=()=>{
		uni.navigateTo({
			url:"/pages/rescue/record/record"
		})
	}


	getLocationInfo();
</script>

<style>
	map {
		width: 100%;
		height: 500rpx;
		border-radius: 30rpx;
		overflow: hidden;
		/* 超出部分隐藏 */
	}

	.container {
		padding: 20rpx;
	}

	/* 选项卡样式 */
	.tab-bar {
		display: flex;
		height: 80rpx;
		/* border-bottom: 1rpx solid #eee; */
		margin-bottom: 30rpx;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		font-size: 32rpx;
	}

	.tab-item.active {
		color: #007AFF;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background-color: #007AFF;
		border-radius: 3rpx;
	}

	/* 表单样式 */
	.form-area {
		margin-bottom: 40rpx;
	}

	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.form-label {
		width: 150rpx;
		height: 65rpx;
		background-color: #4DA6FF;
		color: #fff;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.form-input {
		flex: 1;
		height: 65rpx;
		border: 1rpx solid #ddd;
		border-radius: 30rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
	}

	.form-textarea {
		flex: 1;
		min-height: 100rpx;
		border: 1rpx solid #ddd;
		border-radius: 30rpx;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}

	/* 操作区域样式 */
	.action-area {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.call-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(to right, #FF6B35, #FF3B30);
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin-bottom: 20rpx;
	}

	.record-link {
		font-size: 28rpx;
		color: #999;
	}

	.page-title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.rescue-grid {
		display: flex;
		justify-content: space-between;
	}

	.rescue-item {
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}

	.item-img {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}
</style>